<template>
  <div class="home-page">
    <h1 class="title">您好</h1>
    <p class="welcome">欢迎登录BIKE</p>
    <div v-show="!codeIsTrue" class="input-box">
      <input v-model="deviceName"
        type="number"
        placeholder="请输入设备编号">
    </div>
    <div v-show="!codeIsTrue" class="input-box" style="margin-top: 20px;">
      <input v-model="activationCode"
        type="text"
        placeholder="请输入您的激活码">
    </div>
    <div v-show="codeIsTrue" class="input-box">
      <input v-model="mailbox"
        type="text"
        placeholder="请绑定您的钱包地址">
    </div>
    <div v-show="!codeIsTrue" @click.stop.prevent="checkCode"
      class="checkCode-box">
      <button>下一步</button>
    </div>
    <div v-show="codeIsTrue" @click.stop.prevent="goLogin"
      class="checkCode-box">
      <button>登录</button>
    </div>
  </div>
</template>
<script>
import { request } from '@/utils/request'
export default {
  props: ['deviceId'],
  data() {
    return {
      activationCode: '',
      codeIsTrue: false,
      mailbox: '',
      deviceName: ''
    }
  },
  created() {},
  methods: {
    checkCode() {
      let err
      if (!this.deviceName) {
        err = '请输入设备编号...'
      } else if (!this.activationCode) {
        err = '请输入您的激活码...'
      }
      if (err) {
        plus.nativeUI.toast(err)
        return
      }
      plus.nativeUI.showWaiting()
      request({
        method: 'post',
        url: DOUBANAPI + '/checkCode',
        data: {
          code: this.activationCode,
          device_name: this.deviceName
        }
      })
        .then(res => {
          plus.nativeUI.closeWaiting()
          this.codeIsTrue = true
        })
        .catch(err => {
          console.log(err.response.data.error.indexOf('激活码'))
          plus.nativeUI.closeWaiting()
          if (err.response.data.error.indexOf('编号') != -1) {
            plus.nativeUI.toast('矿机编号已存在...')
            this.deviceName = ''
          } else if (err.response.data.error.indexOf('激活码') != -1) {
            plus.nativeUI.toast('激活码不存在或已被使用,请重写输入...')
            this.activationCode = ''
          }
        })
    },
    goLogin() {
      if (!this.mailbox) {
        plus.nativeUI.toast('请输入您的钱包地址...')
        return
      }
      plus.nativeUI.showWaiting()
      request({
        method: 'post',
        url: DOUBANAPI + '/binding',
        data: {
          device_id: this.deviceId,
          email: this.mailbox,
          code: this.activationCode,
          device_name: this.deviceName
        }
      })
        .then(res => {
          console.log(res)
          plus.nativeUI.toast('登入成功...')
          let info = {
            email: res.data.User.email,
            address: res.data.User.wallet_address,
            deviceId: res.data.User.device_id
          }
          localStorage.setItem('info', JSON.stringify(info))
          this.$emit('goBegin', {
            deviceName: res.data.device_name
          })
          plus.nativeUI.closeWaiting()
        })
        .catch(err => {
          plus.nativeUI.toast(err.response.data.error)
          plus.nativeUI.closeWaiting()
          this.mailbox = ''
        })
    }
  }
}
</script>

<style lang="less">
.home-page {
  width: 100%;
  height: 100%;
  padding: 240px 50px 0 50px;
  background: url('../assets/images/login.png') no-repeat fixed center/cover;
  color: #fff;

  .title {
    height: 45px;
    line-height: 45px;
    font-size: 32px;
  }
  .welcome {
    height: 34px;
    line-height: 34px;
    margin-top: 20px;
    font-size: 24px;
  }
  .input-box {
    position: relative;
    padding: 10px 0;
    margin-top: 165px;
    input {
      width: 100%;
      height: 21px;
      line-height: 21px;
      font-size: 15px;
      color: #fff;
      &::-webkit-input-placeholder {
        color: #bbbbbb;
      }
      &::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #bbbbbb;
      }
      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #bbbbbb;
      }
      &:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #bbbbbb;
      }
    }
    &::after {
      content: ' ';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background-color: #ffffff;
      transform: scaleY(0.5);
    }
  }
  .checkCode-box {
    width: 100%;
    height: 44px;
    line-height: 44px;
    margin-top: 75px;
    text-align: center;
    button {
      width: inherit;
      height: inherit;
      font-size: 19px;
      border-radius: 22px;
      color: #fff;
      // background: linear-gradient(to right, #7c2bba 0%, #4832cc 100%);
    }
  }
}
</style>
